<template lang="">
  <layout :appHeader="{title: '培训反饋'}">
    <view class="home-container">
    <view class="exam-info">
      <view class="exam-list">
        <view class="exam-item">
          <span class="e-label">课程反馈: </span>
          <u-input v-model="remark" :type="type" :height="100" :auto-height="autoHeight" />
        </view>
        <view class="exam-item">
          <span class="e-label">上传凭证：</span>
          <upload ref="upload" :maxCount="maxCount" :formData="formData" :action="action" :file-list="fileList" @on-choose-complete="beforeUpload" :auto-upload="false"></upload>
        </view>               
      </view>
    </view>
      <tui-button :disabled="disableSubmit" :loading="submitLoading" class="bottom-button" @click="submit()">提交反馈</tui-button>
</view>
  </layout>
</template>
<script>
import upload from './u-upload.vue'
import tuiButton from '@/components/thorui/tui-button/tui-button';
const OSS = require('ali-oss')
const ACCESS_KEY_ID = 'LTAI5t6kL9Qt2WLjrSZbjGJc';
const ACCESS_KEY_SECRET = '7EJj5e8u8PvnB9hiFuRuNE3NjO01LA';
const BUCKET = 'insurancetech-public';
const REGION = 'oss-cn-beijing';
const getOssClient = () => {
  const client = new OSS({
    accessKeyId: ACCESS_KEY_ID,
    accessKeySecret: ACCESS_KEY_SECRET,
    bucket: BUCKET,
    region: REGION,
    secure: true,

  });
  return client;
};
export default {
  data() {
    return {
      autoHeight: true,
      type: 'textarea',
      action: '',
      remark: '',
      fileList: [],
      documents: [],
      maxCount: 1,
      formData: {
        '_method': 'put',
        key: '',  //文件名
        policy: '',  //后台获取超时时间
        OSSAccessKeyId: '', //后台获取临时ID
        success_action_status: '200', //让服务端返回200,不然，默认会返回204
        signature: '' //后台获取签名
      },
      disableSubmit: false,
      submitLoading: false,
      workOrderId: '',
      id: '',
    };
  },
  onLoad(options) {
    this.workOrderId = options.workOrderId;
    this.id = options.id;
  },
  components: {
    upload, tuiButton
  },
  methods: {
    async beforeUpload(file, index) {
      const _file = file[0].file;
      const timestamp = Date.parse(new Date());
      const key = `${timestamp}.png`;
      const self = this;
      uni.showLoading({
        title: '正在上传....',
        mask: true
      })
      getOssClient().put(key, _file, {
        partSize: 1024 * 1024,
      }).then(function (result) {
        self.documents[0] = {
          resourceKey: result.url,
          name: _file.name,
          size: _file.size,
          extension: _file.type || "-",
        }
        uni.showToast({
          title: '上传成功',
          icon: 'none'
        });
      }).catch(function (err) {
        console.log(err)
      });
    },
    submit() {
      this.disableSubmit = true;
      this.submitLoading = true;
      uni.$API.WorkOrder.updateWorkOrder(this.workOrderId, {
        data: {
          documents: this.documents,
          remark: this.remark,
          id: this.id
        }

      }).then(res => {
        this.disableSubmit = false;
        this.submitLoading = false;
        uni.navigateBack({ delta: 1 })
      }).catch(error => {
        this.disableSubmit = false;
        this.submitLoading = false;
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.bottom-button {
  font-weight: 500;
  background: #515cc3;
  color: #fff;
  border-radius: 12rpx;
  width: calc(100vw - 40px) !important;
  margin: auto !important;
  position: fixed;
  bottom: 20px;
}
uni-button[disabled]:not([type]),
uni-button[disabled][type="default"] {
  background: #515cc3 !important;
}
.home-container {
  position: relative;
  padding: 24rpx;
  height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 50rpx;
}
.exam-btn {
  position: fixed;
  margin: 0 auto;
  bottom: 60rpx;
  left: 50%;
  transform: translate(-50%, 0);
  width: 92%;
  height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  background: #515cc3;
  color: #fff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exam-item {
  background: #fff;
  margin-bottom: 24rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  .e-label {
    font-size: 30rpx;
    font-weight: bold;
    line-height: 42rpx;
    margin-bottom: 26rpx;
    display: block;
  }
  ::v-deep.u-input__input {
    min-height: 160rpx !important;
    .uni-input-wrapper {
      background: #f5f5f5;
      border-radius: 16rpx;
      font-size: 26rpx;
      font-weight: 500;
      padding-left: 24rpx;
      box-sizing: border-box;
      .uni-input-placeholder {
        color: #9ea2b4;
        padding-left: 24rpx;
      }
    }
  }
  ::v-deep.u-list-item {
    margin: 0;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    width: 160rpx !important;
    height: 160rpx !important;
    .u-add-tips {
      margin-top: 10rpx;
    }
  }
}
</style>